<template>
  <div>
    <!-- 设备组成员弹出窗 -->
    <el-container>
      <el-main>
        <div>
          <el-form :inline="true" label-width="100px">
            <el-form-item
              label="请选择设备组"
              label-width="130px"
              style="margin-left: -30px; margin-top: -25px"
            >
              <el-select
                v-model="selectvalue"
                placeholder="请选择设备组"
                @change="selectchange"
                size="mini"
              >
                <el-option
                  v-for="item in decviceData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="container-box">
            <el-table
              :data="tabledatas"
              border
              stripe
              height="37vh"
              :header-cell-style="{
                background: '#cfcfcf',
                color: '#000000',
                'text-align': 'center',
              }"
              :cell-style="{ 'text-align': 'center' }"
              ref="talbes"
              style="width: 100%"
              size="small"
              @selection-change="selectionChange"
              @row-click="handleRowClick"
            >
              <el-table-column
                type="selection"
                header-align="center"
                width="60"
              ></el-table-column>
              <el-table-column prop="group_name" label="所属设备组">
              </el-table-column>
              <el-table-column prop="device_name" label="设备名称">
              </el-table-column>
              <el-table-column prop="device_code" label="设备编号">
              </el-table-column>
              <el-table-column prop="device_model" label="设备型号">
              </el-table-column>
              <el-table-column prop="model_detail_param" label="型号参数">
              </el-table-column>
              <el-table-column prop="bom_name" label="设备机型">
              </el-table-column>
            </el-table>

            <div class="pagebox">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="param.pageNo"
                :page-sizes="[10, 30, 50, 100, 500]"
                :page-size="param.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
              >
              </el-pagination>
            </div>
            <!-- <div style="float: right">
                            <el-button type="primary" style="color:#ffffff;" @click="bind"> 确定</el-button>
                        </div> -->
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { getlist, getgridsave, getdeletes } from '@/api/message/list'
export default {
  props: {
    num: {
      type: Number,
      default: 0,
    },
  },
  name: 'decvicegroupfrom',
  data() {
    return {
      selectvalue: '',
      decviceparam: { funId: 'msg_device_group' },
      param: {
        funId: 'msg_device_group_members',
        baseSQL: '',
        warnStatus: '',
        name: '',
        offset: 0,
        pageNo: 1,
        limit: 10,
      },
      decviceData: '',
      tabledatas: [],
      dataTotal: 0,
      decviceFrom: '',
      count: this.num,
    }
  },
  mounted() {
    this.getDecvicegroup()
  },
  created() {},
  methods: {
    //复选框按钮
    selectionChange(e) {
      if (this.count == 1) {
        if (e.length != '1') {
          this.$message({
            message: '请选择一条数据',
            type: 'error',
          })
          this.toggleSelection(e)
        } else {
        }
        this.$emit('getName', e)
      } else {
        this.$emit('getName', e)
      }
    },
    handleRowClick(e) {
      this.$refs.talbes.toggleRowSelection(e)
      const _selectData = this.$refs.talbes.selection
      this.selectionChange(_selectData)
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.talbes.toggleRowSelection(row)
        })
        this.decviceFrom = ''
      } else {
        this.$refs.talbes.clearSelection()
      }
    },
    //下拉框
    selectchange(e) {
      this.selectvalue = e
      this.getDecviceData()
    },
    getDecvicegroup() {
      getlist(this.decviceparam).then((res) => {
        if (res.status == '200') {
          let resdata = res.data.rows
          let decviceData = []
          resdata.forEach((item) => {
            decviceData.push({
              label: item.group_name,
              value: item.group_id,
            })
          })
          this.selectvalue = decviceData[0].value
          this.decviceData = decviceData
          this.getDecviceData()
        }
      })
    },
    getDecviceData() {
      this.param.baseSQL = 'group_id =' + this.selectvalue + ''
      getlist(this.param).then((res) => {
        if (res.status == '200') {
          let resdata = res.data
          this.tabledatas = resdata.rows
          this.dataTotal = resdata.total
        }
      })
    },
    indexMethod(index) {
      return (this.param.pageNo - 1) * this.param.limit + index + 1
    },
    sizeChange(val) {
      this.param.limit = val
      this.getDecviceData()
    },
    currentChange(val) {
      this.param.pageNo = val
      this.param.offset = (val - 1) * this.param.limit
      this.getDecviceData()
    },
  },
}
</script>
<style lang="scss" scoped>
.container-box {
  margin-top: -20px;
}
.pagebox {
  text-align: right;
  padding: 10px;
}
</style>
